<template>
  <div class="layout" style="">
    <Layout>
      <Header mode="horizontal" theme="dark" style="height:80px">
        <span class="layout-logo"><h1 style="color: #d2d6da; line-height:80px">共享车位系统</h1></span>
        <span class="layout-nav" @click="logout()"><Icon type="ios-home-outline" />安全退出</span>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <main-menu></main-menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px' }">
          <Content :style="{ padding: '24px', minHeight: '600px', background: '#fff' }">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>

</template>
<script>
import MainMenu from "@/components/MainMenu";
export default {
  components: {
    MainMenu,
  },
  methods: {
    logout() {
      sessionStorage.removeItem("userId");
      this.$router.push("/");
    }
  }
};
</script>

<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-nav{
  border: 0px solid #d7dde4;
  width: 100px;
  margin: 0 auto;
  margin-top: 5px;
  margin-right: 20px;
  float: right;
  color:white;
}
.layout-logo{
  border: 0px solid #d7dde4;
    width: 420px;
    margin: 0 auto;
    margin-left: 38%;
    float: left;
    size: 20px;
}
</style>